<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
            justify-content: center;
            /* align-items: center; */
            width: 100vw;
            height: 100vh;
        }

        main {
            width: 400px;
            flex-direction: column;
            position: relative;
            margin-right: 20px;
        }

        main nav {
            display: flex;
            height: 50px;
            align-items: center;
        }

        main nav a {
            background: #95a5a6;
            margin-right: px;
            padding: 10px 20px;
            border: solid 1px #333;
            color: #fff;
            text-decoration: none;
        }

        main nav a:first-of-type {
            background: #e67e22;
        }

        section {
            height: 200px;
            width: 100%;
            background: #f1c40f;
            position: absolute;
            font-size: 5em;
            /* display: none; */

        }

        .hd-tab section:first-of-type {
            display: block;
        }

        section:nth-child(even) {
            background: #27ae60;
        }
    </style>
</head>

<body>
    <main class="tab1">
        <nav>
            <a href="javascript:;">后盾人</a>
            <a href="javascript:;">hdcms</a>
        </nav>
        <section>1</section>
        <section>2</section>
    </main>
    <main class="tab2">
        <nav>
            <a href="javascript:;">后盾人</a>
            <a href="javascript:;">hdcms</a>
        </nav>
        <section>1</section>
        <section>2</section>

    </main>
</body>
<script>
    //原型的知识点！！！！！
    //原型工厂类
    function extend(sub, sup) {
        sub.prototype = Object.create(sup.prototype);
        sub.prototype.constructor = sub;
    }
    //动画类
    function Animation() { }
    Animation.prototype.show = function () {
        this.style.display = "block";
    };
    Animation.prototype.hide = function () {
        this.style.display = "none";
    };
    Animation.prototype.background = function (color) {
        this.style.backgroundColor = color;
    };
    extend(Tab, Animation);
    function Tab(el, callback = null) {
        this.tab = document.querySelector(el);
        this.run();
        this.removeStyle();
        this.actions(0);
        this.callback = callback;
    }
    Tab.prototype.run = function () {
        this.links = this.tab.querySelectorAll('a');
        this.divs = this.tab.querySelectorAll('section');
        this.bindEvent();
    };
    Tab.prototype.bindEvent = function () {
        this.links.forEach((element, i) => {
            element.addEventListener('click', () => {
                this.removeStyle();
                this.actions(i);
                if (this.callback) this.callback.call(this, i);//传递出去 当前元素和下标
                //call()改变回调指针
            });
        });
    };
    Tab.prototype.actions = function (i) {
        this.background.call(this.links[i], 'pink');
        this.show.call(this.divs[i]);
    };
    Tab.prototype.removeStyle = function () {
        this.links.forEach((el, i) => {
            this.background.call(el, '#95a5a6');
            this.hide.call(this.divs[i]);
        });
    };
    new Tab('.tab2', function (el) {
        // console.log(this.links[i]);
        // console.log(el, i);
        // this.links.forEach((el, i) => {
        //     el.style.color = '#fff';
        // });
        // el.style.color = 'red';
        console.log(this);//用call回调后的this指向 Tab
    });
    new Tab('.tab1')
</script>

</html>